<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="application/javascript">
        function $ (id) {
            return document.getElementById(id);
        }
        const db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
        let msg;
        // transaction 事务，要不全部数据修改，要不全部数据不修改，防止数据修改是出错
        db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
            msg = '<p>success to create table and insert info</p>'
        });

        db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM LOGS', [], function(tx, results) {
                let len = results.rows.length;
                let i;
                msg += '<p>rows: ' + len + '</p>';
                $('status').innerHTML += msg;

                for (let i = 0; i < len; i++) {
                    msg = '<p>' + results.rows.item(i).log + '</p>';
                    $('status').innerHTML += msg;
                }

            }, function(tx,error){console.log(error)});
        });
    </script>
</head>
<body>
    <div id="status"></div>
</body>
</html>